<template>
	<div>
		<!-- 头部导航结构 -->
		<van-nav-bar title="信息编辑" left-text="返回" left-arrow @click-left="$router.back()"
			@click-right="$router.push({path: '/'})">
			<template #right>
				<i class="iconfont icon-home"></i>
			</template>
		</van-nav-bar>

		<!-- 头像区域 -->
		<div class="avatar">

			<van-uploader :after-read="afterRead">
				<div class="avatar_img">
					<van-image round fit="cover" width="100%" height="100%" :src="userinfo.head_img" />
				</div>
			</van-uploader>
		</div>

		<!-- 信息区域 -->
		<!-- @click要执行多行代码，可以用分号隔开 -->
		<div class="info">
			<MyCell title="昵称" :value="userinfo.nickname" @click="nickNameShow = true; 
			nikeNameTemp = userinfo.nickname"></MyCell>

			<MyCell title="密码" :value="userinfo.password" @click="passwordShow = true"></MyCell>

			<MyCell title="性别" :value="userinfo.gender === 1? '男' :'女'" @click="genderShow = true"></MyCell>
		</div>



		<!-- 所有模态框都放到页面底部，避免定位错误 -->
		<!-- 昵称 -->
		<van-dialog v-model="nickNameShow" title="编辑" show-cancel-button :before-close="NickNconfirmFn">
			<van-field required v-model="nikeNameTemp" label="昵称" placeholder="请输入昵称" />
		</van-dialog>

		<!-- 密码 -->
		<van-dialog v-model="passwordShow" title="编辑" show-cancel-button :before-close="passWordconfirmFn">
			<van-field required v-model="oldPw" label="原密码" placeholder="请输入原密码" />
			<van-field required v-model="passwordTemp" label="新密码" placeholder="请输入新密码" />
		</van-dialog>

		<!-- 性别	ActionSheet 动作面板 -->
		<van-action-sheet v-model="genderShow" :actions="actions" cancel-text="取消" close-on-click-action
			@select="onGenderSelect" />

	</div>
</template>

<script>
	import MyCell from '../components/MyCell.vue'
	import {
		userDeatilByIdApi,
		userUpdateByIdApi
	} from '../apis/user.js'
	import request from '../utils/request.js'
	import {
		upLoadFileApi
	} from '../apis/index.js'
	export default {
		data() {
			return {
				userinfo: {},

				nickNameShow: false,
				nickNReg: /^.{2,10}$/,
				nikeNameTemp: '',

				passwordShow: false,
				passwordTemp: '',
				oldPw: '',
				pwReg: /^.{6,16}$/,

				genderShow: false,
				actions: [{
					name: '女'
				}, {
					name: '男'
				}]
			}
		},


		methods: {
			//上传头像，修改头像
			async afterRead(file) {
				//上传需要用formData格式
				const fd = new FormData();
				fd.append("file", file.file);

				//传入一个formdata对象
				const res = await upLoadFileApi(fd);
				console.log("res", res);

				//判断图片是否上传成功
				if (res.data.message === "文件上传成功") {
					//获取图像地址
					const imgURL = res.data.data.url;

					//调用更新API更新数据
					const headImg_up = await userUpdateByIdApi(this.$route.query.id, {
						head_img: imgURL
					});
					console.log(headImg_up);
					//更新数据
					this.userinfo.head_img = request.defaults.baseURL + headImg_up.data.data.head_img;
					this.$toast.success("更新成功！");
				}

			},

			//更新用户昵称
			async NickNconfirmFn(action, done) {
				if (action === "confirm") {
					this.nikeNameTemp = this.nikeNameTemp.trim();
					if (this.nickNReg.test(this.nikeNameTemp)) {
						await userUpdateByIdApi(this.$route.query.id, {
								nickname: this.nikeNameTemp
							}).then(res => {
								this.userinfo.nickname = res.data.data.nickname;
								this.$toast.success("修改成功！");
							})
							.catch(() => {
								this.$toast.fail("修改失败！")
							})
						return done();
					} else {
						this.$toast("昵称由2~10个字符组成")
						return done(false);
					}

				} else {
					return done();
				}
			},

			//更新密码
			async passWordconfirmFn(action, done) {
				if (action === "confirm") {
					this.passwordTemp = this.passwordTemp.trim();
					//旧密码判断
					if (this.pwReg.test(this.passwordTemp)) {
						if (this.oldPw !== this.userinfo.password) {
							this.$toast("原密码错误！");
							return done(false);
						}
						await userUpdateByIdApi(this.$route.query.id, {
								password: this.passwordTemp
							}).then(() => {
								this.userinfo.password = this.passwordTemp;
								this.oldPw = '';
								this.passwordTemp = '';
								this.$toast.success("修改成功！");
							})
							.catch(() => {
								this.$toast.fail("修改失败！")
							})
						return done();
					} else {
						this.$toast("密码由6~16个字符组成")
						return done(false);
					}

				} else {
					return done();
				}
			},

			//更新性别
			async onGenderSelect(action, index) {
				await userUpdateByIdApi(this.$route.query.id, {
						gender: index
					})
					.then(res => {
						this.userinfo.gender = res.data.data.gender;
						this.$toast.success("修改成功！")
					})
					.catch(() => {
						this.$toast.fail("修改失败！")
					})
			}


		},


		components: {
			MyCell
		},

		async created() {
			const id = this.$route.query.id;
			if (!id) return this.$toast.fail("没有用户ID");
			const res = await userDeatilByIdApi(this.$route.query.id);
			res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
			this.userinfo = res.data.data;
		}
	}
</script>

<style lang="less" scoped="scoped">
	.iconfont {
		color: #71b6fc;
		font-size: 6vw;
	}

	.avatar {
		background-color: #eeeeee;
		height: 55vw;
		display: flex;
		justify-content: center;
		align-items: center;


		.avatar_img {
			width: 40vw;
			height: 40vw;


		}




	}
</style>
